<template>
    <div class="box">
        <div class="inner-box">
            <el-avatar :size="48">
                <Shop class="avatar" />
            </el-avatar>
            <span class="title">商城系统登录</span>
            <div class="input-box">
                <el-input v-model="userName" size="large" placeholder="请输入用户名">
                    <template #prefix>
                        <el-icon>
                            <Coordinate />
                        </el-icon>
                    </template>
                </el-input>
                <div class="tip" v-if="userNameCheckRes">您还没有输入用户名</div>
            </div>

            <div class="input-box">
                <el-input type="password" v-model="userPswd" size="large" placeholder="请输入用户密码">
                    <template #prefix>
                        <el-icon>
                            <Lock />
                        </el-icon>
                    </template>
                </el-input>
                <div class="tip" v-if="passwordCheckRes">您还没有输入用户密码</div>
            </div>
            <el-button type="primary" @click="login">确 定</el-button>
        </div>
        <!-- <canvas id="canvas"></canvas> -->
    </div>

</template>
<script setup>
import { getCurrentInstance, ref, onMounted, watch } from 'vue';
import { ElMessage } from 'element-plus'
// import '/util/mouseline' // 点线背景js
const { proxy } = getCurrentInstance()

let userName = ref()
let userPswd = ref()
let userNameCheckRes = ref(false)
let passwordCheckRes = ref(false)

watch( //监听账户名输入
    () => userName.value,
    (newVal, oldVal) => { if (newVal === '') { userNameCheckRes.value = true } else { userNameCheckRes.value = false } }
)
watch( //监听密码输入
    () => userPswd.value,
    (newVal, oldVal) => { if (newVal === '') { passwordCheckRes.value = true } else { passwordCheckRes.value = false } }
)

function login() { //登录
    // window.localStorage.removeItem('token')
    const promiseRes = proxy.$reqFuncAxios('post', 'api/admin/login', { name: userName.value, pw: userPswd.value }, function (res) { })
    promiseRes.then((res) => {
        if (res.data.code === 2000) {
            console.log(res.data.data);
            window.localStorage.setItem('token', res.data.data.token)
            window.localStorage.setItem('navData', JSON.stringify(res.data.data))
            ElMessage.success('登录成功');
            proxy.$router.push('/cms')
        }
        else { ElMessage.error('登录失败: ' + res.data.msg) }
    })
}
</script>
<style scoped>
.box {
    background-image: url(/image/bacimg.jpg);
    background-position: center;
    background-repeat: no-repeat;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
}

.inner-box {
    width: 340px;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-bottom: 92px;
    margin: auto;
}

.el-avatar {
    background-color: #1890FF;
}

.avatar {
    height: 66%;
    width: 66%;
}

.title {
    color: #6C7293;
    font-size: 20px;
    margin: 20px 0 42px 0;
}

.el-input :deep() {
    margin-bottom: 24px;
}

.el-input :deep() .el-input__wrapper {
    background-color: rgba(235, 237, 242, .4);
    box-shadow: none;
}

.el-input :deep() .el-input__wrapper:hover {
    box-shadow: 0 0 0 1px #dcdfe6;
}

.el-input :deep() .el-input__wrapper.is-focus {
    box-shadow: 0 0 0 1px #1890FF;
}

.input-box {
    width: 100%;
    position: relative;
}

.tip {
    position: absolute;
    bottom: 5px;
    width: 100%;
    font-size: 13px;
    color: rgba(0, 0, 0, .45);
}

.el-button {
    margin-top: 20px;
    width: 100%;
    height: 40px;
    border-radius: 2px;
    font-size: 16px;
    background-color: #1890FF;
    box-shadow: 0 10px 25px 5px #188fff17;
}

canvas {
    display: block;
    width: 100%;
    height: 100%;
    position: absolute;
    z-index: -1;
}
</style>